<template>
    <div class="user-box">
        <s-header :name="'手机号'"></s-header>
        <div class="phone">
          <van-field
              v-model="mobile"
              name="mobile"
              label="手机号"
              type="tel"
              placeholder="手机号"
              :rules="[{ required: true, message: '请填写手机号' }]"
              @blur="check_mobile"
              @change="change_mobile"
              />
          <van-field
              v-model="code"
              name="code"
              center
              clearable
              label="短信验证码"
              placeholder="请输入短信验证码"
              :rules="[{ required: true, message: '请输入短信验证码' }]"
          >
      <template #button>
              <van-button size="small" type="button" color="#1baeae" @click="send_sms" round>{{sms_interval}}</van-button>
          </template>
          </van-field>
        <div>
            <van-button class="save-btn" color="#1baeae" type="info" @click="onSave" round >保存</van-button>
        </div>
        </div>
    </div>
</template>

<script>
import sHeader from '@/components/SimpleHeader'
import { Toast } from 'vant'
export default {
  components: {
    sHeader
  },
  data(){
    return {
        signature:'',
        id:'',
        mobile:'',
        sms_interval:'发送验证码',
        code:'',
        is_send:false,
        show:false
    }
  },
  created(
  ){
    this.id=this.$cookies.get('id')
  },
  methods:{
    change_mobile(){
      if (!this.mobile) return;
      if (!this.mobile.match(/^1[3-9][0-9]{9}$/)) {
        Toast.fail('手机号有误')
        return false;
      }
      this.$axios.get(this.$settings.BASE_URL + 'userinfo/user/mobile/?mobile=' + this.mobile).then(res => {
        if (res.code === 100) {
          this.mobile = ''
          Toast.fail('手机号已注册，请登入')
          return false
        } else {
            this.is_send = true;
        }
      })
    },
    check_mobile() {
      if (!this.mobile) return;
      if (!this.mobile.match(/^1[3-9][0-9]{9}$/)) {
        Toast.fail('手机号有误')
        return false;
      }
      this.$axios.get(this.$settings.BASE_URL + 'userinfo/user/mobile/?mobile=' + this.mobile).then(res => {
        if (res.code === 100) {
          this.mobile = ''
          Toast.fail('手机号已注册，请登入')
          return false
        } else {
            this.is_send = true;
        }
      })
    },
    send_sms() {
        if (!this.is_send) return;
        this.is_send = false;
        let sms_interval_time = 60;
        this.sms_interval = "发送中...";
        let timer = setInterval(() => {
        if (sms_interval_time <= 1) {
          clearInterval(timer);
          this.sms_interval = "获取验证码";
          this.is_send = true; // 重新回复点击发送功能的条件
        } else {
          sms_interval_time -= 1;
          this.sms_interval = `${sms_interval_time}秒后再发`;
        }
      }, 1000);
      this.$axios.get(this.$settings.BASE_URL + 'userinfo/user/send_sms/?mobile=' + this.mobile).then(res => {
        if (res.code !== 100) {
          Toast.fail(res.msg)
        }
      })
    },
    onSave(){
        if(!this.code){
            Toast.fail('请先填写验证码')
        }else{
            this.$axios.put(this.$settings.BASE_URL + 'userinfo/update_phone/' + this.id + '/',{
                mobile:this.mobile,code:this.code
        }).then(res=>{
            if(res.code==100){
                this.$cookies.remove('mobile')
                this.$cookies.set('mobile',this.mobile)
                this.$router.go(-2)
            }else{
                Toast.fail(res.msg)
            }
        })
    }
    },
}

}
</script>


<style lang="less" scoped>
  @import '../common/style/mixin';
  .user-box {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10000;
      .fj();
      .wh(100%, 44px);
      line-height: 44px;
      padding: 0 10px;
      .boxSizing();
      color: #252525;
      background: #fff;
      border-bottom: 1px solid #dcdcdc;
      .phone{
        font-size: 14px;
        margin-top:80px;

      }
      .phone_font{
        margin-left: 120px;
        font-size: 24px;
      }

    .save-btn {
      width: 80%;
      margin-left: 30px;
      margin-top:20px
    }
    .back{
        width: 80%;
        margin-left: 70px;
        margin-top:15px

    }
    }

</style>
